<template>
  <div style="padding: 10px">
    以万为单位,原始值放大10000倍
    <d-input v-model="value" :format="{ type: 'money', decimal: 2, scale: 10000 }"></d-input>
    <p>原始value值：{{ value }}</p>
    以%为单位,原始值缩小100倍
    <d-input
      v-model="value2"
      :format="{ decimal: 2, scale: 0.01 }"
      :max="100"
      :min="0"
      @input="handleInput"></d-input>
    <p>原始value值：{{ value2 }}</p>

    <div style="display: flex; margin-bottom: 10px">
      <span>自定义缩放倍数:</span>
      <d-input v-model="scale" type="number" style="flex: 1"></d-input>
    </div>
    <d-input v-model="value3" :format="{ scale: scale }" @input="handleInput"></d-input>
    <p>原始value值：{{ value3 }}</p>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  const value = ref(10000)
  const value2 = ref(0.9)
  const scale = ref(10)
  const value3 = ref(0)

  const handleInput = (v: number) => {
    console.log('🚀 ~ handleInput ~ v:', v)
  }
</script>
